<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div{
            width: 30px;
            height: 30px;
            background-color: yellow; */
            /* float: left; */
        /* } */
        .a{
            width: 30px;
            height: 30px;
            background-color: yellow;
        }
        .b{
            width: 20px;
            height: 20px;
            background-color: blueviolet;
            float: left;
        }
    </style>
</head>

<body>
    <script>
        // 1.D
        // 2.C
        // 3.D
        // 4.D
        // 5.ABCD
        // 6.AB
        // overflow:hiddle:原来位置没有了
        // display：none,原来位置没有了，指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint

        // visibility：hidden，原来位置有，指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint
        // opacity设置为0,原来位置有故只产生repaint

        // 7.ABCD
        // 8.D
        // 9.A
        // L-V-H-A（LV哈）: 
        // :hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。
        // 10.B
        // 11.AC
        // : nth - child(an + b) 在下标计算表达式an + b中：
        // a, b是系数可以是任意整数；
        // n就是个字面量“ n”， 表示是递增变量， 并且取值是从0开始的整数。
        // B是A的下一个兄弟节点（ AB有相同的父结点， 并且B紧跟在A的后面）
        // 可以同时使用多个伪类，而只能同时使用一个伪元素；
        // 12.A
        // 13.C
        // 14.D
        // 一直到IE9， 都是Trident内核
        // firefox是Gecko内核
        // chrome现在是Blink内核

        // -moz代表firefox浏览器私有属性
        //     ms代表IE浏览器私有属性 -
        //     webkit代表chrome、 safari私有属性 IE使用的是Trident内核， Firefox 使用的是Gecko内核。 目前使用IE内核的浏览器还有搜狗， 遨游， 360 等等。
        // 15.C
        // 行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上 
        // 块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上
   </script>
    <!-- <div>adfsghjgfdxsaaqwsedfrgt</div> -->
    <div class="a">
        <div class="b">ew</div>
    </div>

</body>

</html>